<template>
    <div class="container-lg">
      <b-row class="mt-10">
        <!--lg宽  offset-lg右移-->
        <b-col md="" offset-md="2" lg="10" offset-lg="1">
          <b-card title="文章列表" class="text-left">
            <b-table
            ref="selectableTable"
            selectable
            :select-mode= "selectMode"
            :items="items"
            :fields="fields"
            @row-selected="onRowSelected"
            responsive="sm"
    >
      <!-- 实现选中某行文章 -->
      <template v-slot:cell(selected)="{ rowSelected }">
        <template v-if="rowSelected">
          <span aria-hidden="true">&check;</span>
          <span class="sr-only">Selected</span>
        </template>
        <template v-else>
          <span aria-hidden="true">&nbsp;</span>
          <span class="sr-only">Not selected</span>
        </template>
      </template>
    </b-table>

    <b-button 
      variant="outline-primary" 
      @click="Copy"
      block
      >复制</b-button>

    <b-button 
      variant="outline-primary" 
      @click="Delete()"
      block
      >删除</b-button>
    <!--帮助显示选中的文章具体内容
        测试完应该删除-->
    <p>
      Selected Rows:<br>
      {{ selected }}
    </p>

    <b-modal id="bv-modal-example" hide-footer>
      <template v-slot:modal-title>
        提示
      </template>
      <div class="d-block text-center">
        <h3>{{ thend }}</h3>
      </div>
      <b-button class="mt-3" block @click="$bvModal.hide('bv-modal-example')">Close Me</b-button>
    </b-modal>

          </b-card>
        </b-col>
      </b-row>
    </div>
  </template>

<script>

import {mapState} from 'vuex'
import requestService from '@/service/requestService';
export default {
    computed: mapState({
    userName: (state) => state.userModule.userName,
    }),
    data() {
        return {
            //规定表单的数据
            fields: [
          {
            key: 'Id',
            sortable: true
          },
          {
            key: 'title',
            sortable: false
          },
          {
            key: 'desc',
            sortable: false,
          },
          {
            key: 'createDate',
            sortable: true
          }
        ],
            items: [
            { Id: 40, title: 'Dickerson', summary: 'Macdonald', CreatedDate: '2021/01/12'},
            { Id: 21, title: 'Larsen', summary: 'Shaw', CreatedDate: '2021/07/13' },
            { Id: 89, title: 'Geneva', summary: 'Wilson', CreatedDate: '2022/01/02' },
            { Id: 38, title: 'Jami', summary: 'Carney', CreatedDate: '2023/05/22' }
          ],
          selected: [],
          selectMode: 'single',
          thend: '',
        }
    },
    mounted(){
        this.getArt()
    },
    methods:{
        //接口名待、接收数据具体名字(article)修改
        getArt(){
            requestService.get('showArticleRecord/' + this.userName).then
            (request =>{
                this.items = request.data.data
            })
        },
        //接口函数名待修改
        Delete(){
          console.log('删除' + this.selected[0].Id);
          requestService.post('deleteArticle', this.selected[0])
          .then(request =>{
            this.thend = '成功删除文章'
            //显示成功提示框
            $bvModal.show('bv-modal-example')
            console.log(request)})
          .catch((err) =>{
            this.thend = '删除文章失败'
            //显示失败提示框
            $bvModal.show('bv-modal-example')
            console.log(request)})
        },
        //试验复制功能
        Copy(){
          console.log('复制');
          //创建input标签
          var input = document.createElement('input')
          //将input的值设置为需要复制的内容
          input.value = this.selected[0].comtent;
          //添加input标签
          document.body.appendChild(input)
          //选中input标签
          input.select()
          //执行复制
          document.execCommand('copy')
          //成功提示信息
          this.thend = '复制成功！'
          $bvModal.show('bv-modal-example')
          //移除input标签
          document.body.removeChild(input)
        },
        onRowSelected(items){
            this.selected = items
        }
    },
}
  </script>